<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('BookStore2[\'Display:VacationHandleStatus\']')" prop="status">
        <el-select v-model="listContext.status" :placeholder="$t('BookStore2[\'Display:VacationHandleStatus\']')" clearable>
          <el-option :label="$t('BookStore2[\'Enum:VacationHandleStatus:1\']')" :value="1" />
          <el-option :label="$t('BookStore2[\'Enum:VacationHandleStatus:2\']')" :value="2" />
          <el-option :label="$t('BookStore2[\'Enum:VacationHandleStatus:3\']')" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">
          <i class="el-icon-search" />
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('BookStore2[\'LoadingWithThreeDot\']')"
      :empty-text="$t('BookStore2[\'NoDataAvailableInDatatable\']')"
      border
      fit
      highlight-current-row
      height="calc(100vh - 225px)"
      @sort-change="sortChange"
    >
      <el-table-column :label="$t('BookStore2[\'Display:Driver\']')" prop="driverName">
        <template slot-scope="scope">
          {{ scope.row.driverName }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:Reason\']')" prop="reason">
        <template slot-scope="scope">
          {{ $t('BookStore2[\''+ scope.row.reason + '\']') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:Remark\']')" prop="remark">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:StartTime\']')" prop="vacationStartTime">
        <template slot-scope="scope">
          {{ scope.row.vacationStartTime | dateYMDFormat }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:EndTime\']')" prop="vacationEndTime">
        <template slot-scope="scope">
          {{ scope.row.vacationEndTime | dateYMDFormat }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:Days\']')" prop="vacationDays">
        <template slot-scope="scope">
          {{ scope.row.vacationDays }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:CreationTime\']')" prop="creationTime" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.creationTime | dateYMDHMSFormat }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:VacationHandleStatus\']')" prop="vacationHandleStatus">
        <template slot-scope="scope">
          <span :style="{'color': scope.row.currentHandleStatus === 3 && 'red'}">{{ scope.row.currentHandleStatus && $t('BookStore2[\'Enum:VacationHandleStatus:' + scope.row.currentHandleStatus + '\']') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Actions\']')">
        <template slot-scope="scope">
          <el-button v-if="checkPermission('BookStore2Vacation.Approval')" v-show="scope.row.currentHandleStatus !== 2 && scope.row.currentHandleStatus !== 3" type="success" size="small" icon="el-icon-check" circle @click="clickActionDropDown({ action: 'agreed', row: scope.row })" />
          <el-button v-if="checkPermission('BookStore2Vacation.Approval')" v-show="scope.row.currentHandleStatus !== 2 && scope.row.currentHandleStatus !== 3" type="danger" size="small" icon="el-icon-close" circle @click="clickActionDropDown({ action: 'rejected', row: scope.row })" />
        </template>
      </el-table-column>
<!--      <el-table-column :label="$t('BookStore2[\'Actions\']')">-->
<!--        <template slot-scope="scope">-->
<!--          <el-dropdown trigger="click" @command="clickActionDropDown">-->
<!--            <el-button type="primary">-->
<!--              <i class="el-icon-setting" />-->
<!--              {{ $t('BookStore2[\'Actions\']') }}-->
<!--              <i class="el-icon-arrow-down" />-->
<!--            </el-button>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item :command="{ action: 'handleRecords', row: scope.row }">{{ $t('BookStore2[\'VacationHandleRecords\']') }}</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <div class="block" style="margin-top: 10px">
      <el-pagination
        :page-sizes="pageContext.pageSizes"
        :page-size.sync="listContext.maxResultCount"
        :current-page.sync="pageContext.currentPage"
        :total="pageContext.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchData"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getList, deleteById, approval } from '@/api/vacation/vacation'
import { checkPermission } from '@/utils/abp'
export default {
  name: 'Vacation',
  data() {
    return {
      list: null,
      listLoading: false,
      pageContext: {
        pageSizes: [10, 25, 50, 100],
        totalCount: 0,
        currentPage: 1
      },
      listContext: {
        status: 1,
        vacationType: '',
        sorting: '',
        skipCount: 0,
        maxResultCount: 10
      },
      createOrEditDialogCtx: {
        id: '',
        title: '',
        actionMode: ''
      },
      createOrEditDialogVisible: false,
      dataDict: {}
    }
  },
  async created() {
    this.fetchData()
  },
  methods: {
    checkPermission,
    fetchData() {
      this.listLoading = true
      getList(this.listContext).then((response) => {
        this.list = response.items
        this.pageContext.totalCount = response.totalCount
        this.listLoading = false
      })
    },
    handleCurrentChange(currentPage) {
      this.listContext.skipCount = (currentPage - 1) * this.listContext.maxResultCount
      this.fetchData()
    },
    sortChange({ prop, order }) {
      this.listContext.sorting = ''
      if (order) {
        this.listContext.sorting = prop + ' ' + order
      }
      this.fetchData()
    },
    clickActionDropDown(ctx) {
      switch (ctx.action) {
        case 'agreed':
          this.$confirm(this.$t('BookStore2[\'AreYouSure\']')).then(async _ => {
            await approval(ctx.row.id, { handleResult: 'agreed', action: 2 })
            this.$message({
              message: this.$t('BookStore2[\'Ok\']'),
              type: 'success'
            })
            this.fetchData()
          }).catch(_ => {})
          break
        case 'rejected':
          this.$confirm(this.$t('BookStore2[\'AreYouSure\']')).then(async _ => {
            await approval(ctx.row.id, { handleResult: 'rejected', action: 3 })
            this.$message({
              message: this.$t('BookStore2[\'Ok\']'),
              type: 'success'
            })
            this.fetchData()
          }).catch(_ => {})
          break
      }
    },
    openCreateDialog() {
      this.createOrEditDialogVisible = true
      this.createOrEditDialogCtx = {
        title: this.$t('BookStore2[\'NewVacation\']'),
        actionMode: 'create'
      }
    },
    openEditDialog(id) {
      this.createOrEditDialogVisible = true
      this.createOrEditDialogCtx = {
        title: this.$t('BookStore2[\'Edit\']'),
        actionMode: 'edit',
        id: id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

